<template>
	<div class="myRecommend">
		<h4>{{floorName}}</h4>
		<div class="myRecommendContent clearfix">
			<router-link 
			v-for="item of floors" 
			v-lazy="item.image" 
			width="100%" 
			:key="item.goodsId" 
			:to="{name:'goodsDetails',params:{id:item.goodsId}}" tag="img">
				
			</router-link>
		</div>
	</div>

</template>

<script>
	export default {
		name: "myRecommend",
		props: ["floorName", "floors"]
	}
</script>

<style lang="scss" scoped="scoped">
	

	.myRecommend {
		width: 100%;
		background-color: #ccc;
		h4 {
			padding: 10px 0;
			text-align: center;
		}
		.myRecommendContent {
			width: 100%;
			height: 301px;
			img {
				width: 186.5px;
				float: left;
				height: 99px;
				&:first-child {
					height: 200px;
					margin-right: 2px;
					margin-bottom: 2px;
				}
				&:first-child+img {
					margin-bottom: 2px;
				}
				&:first-child+img+img {
					margin-bottom: 2px;
				}
				&:first-child+img+img+img {
					margin-right: 2px;
				}
			}
		}
	}
</style>
